<template>
    <div>
        <el-row>
            <el-col :span="10" style="margin-left: 16px;margin-bottom: 30px">
                <el-input placeholder="请输入内容">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <el-col :span="1" style="margin-left: 16px">
                <el-button type="warning">搜索</el-button>
            </el-col>
            <el-col :span="1" style="margin-left: 16px;margin-right: 35px">
                <el-dropdown>
                    <el-button type="primary">
                        排序<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>按名称升序</el-dropdown-item>
                        <el-dropdown-item>按名称降序</el-dropdown-item>
                        <el-dropdown-item>按创建时间升序</el-dropdown-item>
                        <el-dropdown-item>按创建时间降序</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
            <el-col :span="1">
                <el-button type="success" @click="createProperty">创建物业实体</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col class="card" :span="6" v-for="(p, index) in propertyList" :key="p.infoId" :offset="index > 0 ? 2 : 0">
                <el-card :body-style="{padding: '0px'}" shadow="hover">
                    <img :src="p.imageUrl" class="image">
                    <div style="padding: 14px;text-align: center">
                        <span>{{p.name}}</span>
                        <div class="bottom clearfix">
                            <el-row style="padding-bottom: 10px">
                                <el-col style="text-align: center">
                                    <el-button type="primary" icon="el-icon-edit-outline" class="button" @click="addOrUpdateProperty(p.infoId)">基本信息</el-button>
                                    <el-button type="primary" icon="el-icon-location" class="button">巡检点</el-button>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-button type="primary" icon="el-icon-document" class="button">巡检计划</el-button>
                                    <el-button type="primary" icon="el-icon-setting" class="button">巡检单</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-pagination :current-page="1" :page-sizes="[10, 20, 50, 100]" :page-size="12" :total="1" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <add-or-update v-if="AddOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script>
    import AddOrUpdate from './property-add-or-update'
    import axios from 'axios'

    export default {
        name: "property",
        components: {
            AddOrUpdate
        },
        data() {
            return {
                AddOrUpdateVisible: false,
                propertyList: []
            }
        },
        activated() {
            this.getDataList();
        },
        methods: {
            addOrUpdateProperty(infoId) {
                this.AddOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(infoId);
                });
            },
            getDataList() {
                axios.get('http://gulimall.com/api/inspection/property/list').then(
                    response => {
                        let data = response.data;
                        console.log('response list', data);
                        if (data || data.code === 0){
                            this.propertyList = data.page.list;
                        } else {
                            this.propertyList = [];
                        }
                    },
                    error => {
                        console.log('获取物业实体出现错误', error);
                    }
                );
            },
            createProperty() {
                this.AddOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init();
                });
            }
        }
    }
</script>

<style scoped>
    .image {
        width: 100%;
        height: 250px;
        text-align: center;
        display: block;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .el-card {
        margin: 20px;
    }

    .el-col-offset-2 {
        margin-left: 0;
    }
    .page .el-col {
        margin-left: 12px;
    }

    .el-col-3 {
        padding-top: 9px;
    }
</style>
